<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>模版列表</title>
<link href="${ctx}/decorators/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<%-- <script src="${ctx}/decorators/js/jquery-2.1.1.min.js"></script> --%>
<script src="${ctx}/assert/js/common.js"></script>
<script src="${ctx}/decorators/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${ctx}/decorators/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="${ctx}/assert/js/jquery.validate.min.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/decorators/css/plugins/toastr/toastr.min.css"></link>
<script src="${ctx}/decorators/js/plugins/toastr/toastr.min.js"></script>
<script src="${ctx}/decorators/js/jquery.qrcode.js"></script>

<script type="text/javascript">
$(function(){
	$("#templateErrMsg").html("");
	
		$("#modelForm").validate({
			debug : false,
			rules : {
				templateCode : {
					required : true,
					minlength : 1,
					maxlength : 3,
					digits:true 
				},
				templateName: {
					required : true,
					minlength : 2,
					maxlength : 10,
					checkName:true
				}
			},
			messages : {
				templateCode : {
					required : "请输入模版代码",
					minlength : "模版代码最小为1位",
					maxlength : "模版代码最大为3位",
					digits : "模版代码必须输入数字"
				},
				templateName : {
					required : "请输入模版名称",
					minlength : "模版名称最小为6位",
					maxlength : "模版名称最大为20位",
					checkName:"模版名称不能包含'\'或者'.'"
				}
			}
		});

jQuery.validator.addMethod("checkName", function(value, element) {
	var bool = false;
	if(value.indexOf("\\")==-1 && value.indexOf(".")==-1 ){
			bool = true;
	}
	return bool;
}, "模版名称不能包含'\'或者'.'");
	
	
});

	function showTemplateModel(index,id){
		//新增模版
		if (index == 1) {
 			$("#templateErrMsg").html("");
			$("#addModelTitle").text("新增模版");
 			$("#updateId").val("");
			$("#templateName").val(""); 
			$("#templateCode").val("");
			document.getElementById("templateCode").readOnly = false;
			document.getElementById("templateCode").disabled = false;
			$("#tempUrl").css("display",'none');
		}
		//编辑模版
		if(index == 2){
			$("#templateErrMsg").html("");
			$("#addModelTitle").text("编辑模版");
			$("#tempUrl").css("display",'block');
 			$("#updateId").val(id);
			$.ajax({
				type : "POST",
				url : "selectTemplateInfo", //换成你要请求的action, paperId 是url参数
				data : {
					id : id
				},
				dateType : 'json',
				error : function(msg) {
					toastr.error("查询失败！")
				},
				success : function(data) {
					data = eval("[" + data + "]");
 					var template = data[0][0];
 					var imageUrl = data[0][1];
					$("#templateCode").val(template.templateCode);
					$("#templateCode").attr("disabled",true);
					$("#templateName").val(template.templateName);
					$("#templateUrl").val(template.templateUrl);
					$("#templateUrl").attr("readonly","readonly");
					if(template.templateImg != null){
						$("#imageDiv").show();
						$("#updateImage").css("display",'block');
					}
					$("#templateImg").val(template.templateImg);
					$("#updateImage").attr("src",imageUrl+template.templateImg); 
				}
			});
		}
		//删除模版
		if(index == 3){
			$("#delId").val(id);
			$("#delTemplateModal").show();
		}
	}

	/**
	 * 图片预览
	 */
	function previewImage(imgFile) {
		//清除错误消息
		document.getElementById("errDiv").style.display = "none";
		$("#error").html("");
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
		if (!pattern.test(imgFile.value)) {
			$("#errDiv").show();
			$("#error").html("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");
			$("#error").show();
			imgFile.focus();
			document.getElementById("file").value = "";
		} else {
			var path;
			//IE
			if (document.all) {
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("imgPreview").innerHTML = "";
				document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else {
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("imgPreview").innerHTML = "<img src='"+path+"' width='150px' height='100px'/>";
				document.getElementById("removeImageBtn").style.display = "";
				document.getElementById("updateImage").style.display = "none";
				document.getElementById("imageDiv").style.display = "none";
				$("#templateImage").val("");
			}
		}
	}

	/**
	 * 移除图片
	 */
	function removeImage(sign) {
		if (sign == 1) {
			document.getElementById("imgPreview").innerHTML = "";
			document.getElementById("removeImageBtn").style.display = "none";
			$("#file").val("");
		} else {
			document.getElementById("imageDiv").style.display = "none";
			$("#templateImage").val("");
		}
	}
	//保存模版
	function saveTemplate(){
		var templateCode = $("#templateCode").val();
		var id = $("#updateId").val();
		if (isEmpty(id)) {
			id = 0;
		}
		//表单验证
		if (!$("#modelForm").valid())
			return;
		$.ajax({
			type : "POST",
			url : "checkTemplateCode", //换成你要请求的action, paperId 是url参数
			data : {
				id : id,
				templateCode : templateCode
			},
			dateType : 'text',
			error : function(msg) {
				toastr.error("保存失败！")
			},
			success : function(data) {
				if (data == 'success') {
					$("#modelForm").submit();
				} else {
					$("#templateMsgDiv").show();
					$("#templateErrMsg").html("系统中有重复的模版代码，请重新输入");
					$("#templateErrMsg").show();
					$("#templateCode").select();
				}
			}
		});
	}
	
	/**
	 * 删除
	 */
	function delTemplate() {
		var id = $("#delId").val();
		$.ajax({
			type : "POST",
			url : "${ctx}/admin/deleteTemplate", //换成你要请求的action, paperId 是url参数
			data : {
				'id' : id
			},
			dateType : 'text',
			success : function(msg) {
				if (msg == "success") {
					$("#delConfirm").html("删除成功！");
					document.location.reload();
				}
			},
			error : function(msg) {
				$("#delConfirm").html("删除失败！");
			}
		});
	}
	
	function showHtml(id){
		$.ajax({
			type : "POST",
			url : "showHtml", //换成你要请求的action, paperId 是url参数
			data : {
				'id' : id
			},
			dateType : 'text',
			success : function(msg) {
				if (msg != "" && msg != 'undefined') {
					createvcf(msg);					
				}
			},
			error : function(msg) {
				$("#container").html("连接错误");
			}
		});
	}
	
					
			
	//将画好的二维码图片显示出来
	function createvcf(qrcode_text){
			

			$('#container').empty();
			$('#container').qrcode({
				render: 'canvas',				//二维码显示模式（canvas,image,div）,注意canvas模式支持二维码带logo和标签，image支持标签，div只支持普通
				ecLevel: 'H',						//二维码容错率（L-7%,M-15%,Q-25%,H-30%）
				color: '#000000',				//前景色
				bgColor: '#ffffff',				//背景色
				text: qrcode_text,		//二维码内容
				size: 240,							//二维码大小
				mode: 0,							//二维码类型模式（0 - 普通二维码，1 - 长条状标签，2 - 盒子状标签，3 - 长条状图片，4 - 盒子状图片）
				label: '',							//标签内容(二维码美化)
				labelsize: 0,						//标签字体大小(二维码美化)
				fontname: '',					//标签字体格式(二维码美化)
				fontcolor: '',						//标签颜色(二维码美化)
				image: null,						//logo图片(二维码美化)
				imagesize: 0					//logo图片大小(二维码美化)
			});
					
	}
		
		
</script>
</head>
<body>

	
	      <div class="row">
            <div class="col-lg-12">
               <div class="row wrapper border-bottom white-bg ibox-title">
                         <div class="col-lg-11">
                             <h3>模版列表</h3>
                         </div>
                         <div class="col-lg-1">
                             <c:if test="${admin.role eq 2 }">
			<button type="button" class="btn btn-success btn-block" 
			onclick="showTemplateModel(1,0);" data-toggle="modal" data-target="#templateModal">新增模版
			</button></c:if>
                         </div>
                   </div>
	
	
	
	
	
	
	<div class="wrapper wrapper-content">
		<div class="row animated fadeInRight">
			<c:forEach items="${templateList}" var="template">
				<div class="col-md-3">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>${template.templateName}</h5>
						</div>
						<div>
							<div class="ibox-content no-padding border-left-right">
								<img alt="image" class="img-responsive"
									src="${imageUrl}${template.templateImg}" width="100%">
							</div>
							<div class="ibox-content profile-content">
								<div class="user-button">
									<div class="row">
									   <div class="col-md-4" >
											<button type="button" onclick="showHtml('${template.id}');" 
											class="btn btn-success btn-sm btn-block" data-toggle="modal" data-target="#showTemplateModal">
												 预览
											</button>
										</div>
									<c:if test="${admin.role eq 2 }">
										<div class="col-md-4">
											<button type="button"
												class="btn btn-primary btn-sm btn-block"
												onclick="showTemplateModel(2,'${template.id}');" data-toggle="modal" data-target="#templateModal">
												 编辑
											</button>
										</div>
										<div class="col-md-4" >
											<button type="button" class="btn btn-danger btn-sm btn-block"
											onclick="showTemplateModel(3,'${template.id}');" data-toggle="modal" data-target="#delTemplateModal">
												 删除
											</button>
										</div>
									</c:if>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</c:forEach>
		</div>
	</div>
	</div>
	</div>
	<div class="modal inmodal in" id="templateModal" tabindex="-1" role="dialog"
		aria-hidden="true" aria-labelledby="addModelTitle">
		<div class="modal-dialog">
			<div class="modal-content animated fadeIn">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="addModelTitle"></h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="modelForm" name="modelForm" method="post" 
					action="${ctx}/admin/saveTemplate" enctype="multipart/form-data">
						<input type="hidden" class="form-control" name="id" id="updateId">
						<div style="display: none" id="templateMsgDiv">
							<label id="templateErrMsg" style="color: red"></label>
						</div>
						<div class="form-group">
							<label class="col-lg-3 control-label">模版代码：</label>
							<div class="col-lg-8">
								<input type="text" class="form-control" name="templateCode" id="templateCode">
							</div>
						</div>
						<div class="form-group">
							<label class="col-lg-3 control-label">模版名称：</label>
							<div class="col-lg-8">
								<input type="text" class="form-control" name="templateName" id="templateName">
							</div>
						</div>
						 
						<div class="form-group" id="tempUrl">
							<label class="col-lg-3 control-label">预览地址：</label>
							<div class="col-lg-8">
								<input type="text" class="form-control" name="templateUrl" id="templateUrl">
							</div>
						</div>
						 
						<div class="form-group">
							<label class="col-lg-3 control-label">模版图片：</label>
							<div class="col-sm-8">
								<input type="file" name="file" id="file" style="width: 200px;"
									onchange='previewImage(this)' />
							</div>
							<div style="display: none" id="errDiv">
								<label id="error" style="color: red"></label>
							</div>
						<div class="col-sm-4" id="imgPreview" style="margin-top:10px;"></div>
						<div class="removeImg">
						<input type="button" class="btn btn-success" value="移除"
							style="display: none;"
							onclick="removeImage(1)" id="removeImageBtn" />
						<div id="imageDiv" style="display: none">
							<img src=""
								style="width: 150px; height: 100px; float: left"
								id="updateImage"> <input type="hidden" name="templateImg"
								id="templateImg" value="" /> <input
								type="button" class="btn btn-success" value="移除"
								onclick="removeImage(2)" style="margin: 60px 15px 0;" />
						</div>
						</div>
						</div>
					</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onclick="saveTemplate();">保存</button>
			</div>
		</div>
	</div>
	</div>
	<div class="modal inmodal fade" id="delTemplateModal" tabindex="-1"
		role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-body">
					<h3  id="delConfirm">确认删除该条模版么？</h3>
			
				</div>
				<div class="modal-footer">
					<form class="form-horizontal" id="delTemplate" method="post">
						<input type="hidden" name="delId" id="delId" />
						<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary"  onclick="delTemplate();">确认</button>
					</form>
				</div>
			</div>
		</div>
	</div>
	
	
<div class="modal fade"  id="showTemplateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="modelScanInfo">模板</h4>
				</div>
				<div class="modal-body text-center"id="container">
			
				</div>
				<h4 class="text-danger text-center panel-body">请用手机扫描上面的二维码</h4>
			</div>
		</div>
	</div>	
	

</body>
</html>